<template>
  <div id="app">
    <Header v-if="$route.meta.showHeader">
      <img
        src="https://static.web.ikea.cn/static/images/h5/h5-logo.svg"
        alt=""
        slot="left"
        v-if="$route.meta.showLogo"
      />
      <van-icon
        name="arrow-left"
        slot="left"
        v-if="$route.meta.showBack"
        @click="goback"
      />
      <router-link to="/search" slot="search" class="tu">
        <van-icon name="search" />
      </router-link>
      <router-link to="/cart" slot="right" class="tu">
        <van-icon name="shopping-cart-o" />
      </router-link>
      <router-link to="/category" slot="fenlei" class="tu">
        <van-icon name="apps-o" />
      </router-link>
    </Header>
    <Footer></Footer>
    <!-- 动画延迟 -->
    <transition mode="out-in">
      <router-view></router-view>
    </transition>
    <van-tabbar
      route
      v-model="active"
      active-color="#0058a3"
      inactive-color="#959595"
      v-if="$route.meta.showFooter"
    >
      <van-tabbar-item icon="home-o" :to="{ name: 'Home' }"
        >首页</van-tabbar-item
      >
      <van-tabbar-item icon="apps-o" :to="{ name: 'Category' }"
        >分类</van-tabbar-item
      >
      <van-tabbar-item icon="browsing-history-o" :to="{ name: 'Faxian' }"
        >发现</van-tabbar-item
      >
      <van-tabbar-item icon="shopping-cart-o" :to="{ name: 'Cart' }"
        >购物袋</van-tabbar-item
      >
      <van-tabbar-item icon="setting-o" :to="{ name: 'Mine' }"
        >我</van-tabbar-item
      >
    </van-tabbar>
  </div>
</template>
<script>
import Header from "./components/Header.vue";
import Footer from "./components/Footer.vue";

export default {
  name: "App",
  components: {
    Header,
    Footer,
  },
  data() {
    return {
      active: 0,
    };
  },
  created() {
    const ids = localStorage.getItem("ids") ? localStorage.getItem("ids") : [];
    this.$store.commit("savevuex", ids);
  },
  methods: {
    goback() {
      this.$router.go(-1);
    },
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
#app {
  padding-bottom: 50px;
}
.v-enter,
.v-leave-to {
  opacity: 0;
  transform: translateX(100%);
}
.v-enter-active,
.v-leave-active {
  transition: all ease 0.3s;
}
</style>
